<template>
	<view>
		<view class="h-90 color-32 text-bold border">
			<!-- <view class="w-670">{{fdd.name}}?{{fdd.name}}({{fdd.code}}):{{jijin}}</view> -->
			<view class="w-670">{{ fdd.name || "未获取到" }}</view>
		</view>

		<view class="flex padding-top justify-between w-670">
			<view class="flex-sub fs-24 color-99">买入基金</view>
			<view class="flex-sub fs-24 color-99 text-right">交易规则</view>
		</view>

		<view class="buy">
			<view class="buy-left">¥</view>
			<view class="buy-right">
				<input @input="priceTap" type="num" :class="[val >= 100 ? 'num' : 'pld']" v-model="val"
					:placeholder="'最低买入'+startmoney+'.00元'" />
			</view>
		</view>

		<view class="border">
			<view class="fs-24 color-47 padding-top padding-bottom w-670">
				<text>买入费率</text>
				<text style="text-decoration: line-through">{{ fdd.rateOfReturn }}%</text>
				<text class="text-red">{{netWorth? netWorth:fdd.rateOfReturn }}%</text>
				<text>,预计{{thistime.month}}月{{thistime.day-0+1}}日({{thistime.weekends}})，以{{thistime.month}}月{{thistime.day}}日（{{thistime.weekend}})净值确认份额(卖出手续费详见交易规则)</text>
			</view>
		</view>

		<view class="flex payMethod w-670">
			<view class="flex-sub fs-32 color-47">付款方式</view>
			<view class="flex-sub fs-24 text-right" @tap="choosePay">
				<view class="fs-32 color-47">{{ pay[0].name }}</view>
				<view class="color-99">最多支付{{ pay[0].money }}.00元</view>
			</view>
		</view>

		<view class="bg-f8 margin-top">
			<view class="color-47 w-670">点击确定即表示您已知悉该基金的产品概要和投资人权益知等相关内容</view>

			<view class="padding-top w-670">
				<button class="cu-btn block text-white btn-lg fs-32" :class="[val >= startmoney ? 'after' : 'before']"
					@tap="confirm">
					确定
				</button>
				<!-- <button class="cu-btn block text-white btn-lg margin-top fs-32" :class="[(val>=100)?'after':'before']"
					@tap="show">风险评测</button> -->
			</view>
		</view>
		<!-- 支付组件 -->
		<payPass ref="verify" @finish="getCode"></payPass>
		<!-- 风险评测 组件-->

		<unik-modal ref="unikModal" :modalTitle="modalTitle" @confirmModal="confirmModal" @cancelModal="cancelModal">
			<text>{{ info }}</text>
		</unik-modal>
		<!-- 风险评测跳转模态 -->
		<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content"></view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<p>购买之前需要对您的风险承受能力进行评测</p>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">
							取消
						</button>
						<button class="cu-btn bg-green margin-left" @tap="downAccount">
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import Buy from '../../components/common/buy.vue'
	import payPass from '@/components/pay-pass/pay-pass.vue'
	import unikModal from '@/components/unik-modal/unik-modal.vue'
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"product"
	);
	const {
		mapActions: ordersMapActions,
		mapState: ordersMapState,
		mapMutations: ordersMapMutations,
	} = createNamespacedHelpers("orders");
	const {
		mapActions: UsersMapActions,
		mapState: UsersMapState,
		mapMutations: UsersMapMutations,
	} = createNamespacedHelpers("users");
	export default {
		components: {
			// Buy,
			payPass,
			unikModal,

		},
		data() {


			return {
				thistime: {
					weekend: "",
					weekends: "",
					month: "",
					day: "",
					year: "",
					hs: ""
				},
					startmoney: 0,
				netWorth: "",
				fdd: {},
				modalName: "", //风险确认模态框
				val: '',
				modalTitle: '风险测评',
				info: '根据相关规定我们需要先对您做一个简短的测评,来验证您是否能够承担投资风险',
				payMethod: ['我的钱包', '工商银行(5510)', '农业银行(5510)', '建设银行(5510)', "中国银行(2510)"],
				// pay: '我的钱包',
				payArr: [{
					name: '我的钱包',
					money: 1000
				}, {
					name: '工商银行(5510)',
					money: 20000
				}, {
					name: '农业银行(5510)',
					money: 10000
				}, {
					name: '建设银行(5510)',
					money: 8000
				}, {
					name: '中国银行(2510)',
					money: 150000
				}],
				pay: [{
					name: '我的钱包',
					money: 1000
				}]
			}
		},
		computed: {
			// ...mapState(['fdd']),

			...UsersMapState(["userInfo"]),

		},

		methods: {
			...mapMutations(["clearfdd"]),
			...UsersMapMutations(["goLogin","goReal"]),
			...UsersMapActions(['getM']),
			...ordersMapActions(["buyProduct", "getPayToken", "isVerifyPayPassword"]),
			// 获取当前时间
			gettime() {
				var myDate = new Date();
				this.thistime.year = myDate.getFullYear(); //获取年
				this.thistime.month = myDate.getMonth();
				this.thistime.day = myDate.getDate(); //获取日
				this.thistime.weekend = myDate.getDay();
				this.thistime.hs = myDate.toLocaleString('chinese', {
					hour12: false
				})
				var weeks = new Array("周日", "星周", "周二", "周三", "周四", "周五", "周六");
				
				var month = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
				this.thistime.weekends=this.thistime.weekend-0+1
				this.thistime.weekend = weeks[this.thistime.weekend]
				this.thistime.weekends = weeks[this.thistime.weekends]
				this.thistime.month = month[this.thistime.month]
				//这些if判断是在小于10的时候前面自动补0				   
				if (this.thistime.day < 10) {
					this.thistime.day = '0' + this.thistime.day
				}
			},
			//风险评测-确定
			downAccount() {
				this.modalName = ""
				uni.navigateTo({
					url: "../../pagesB/ris-appraisal/ris-appraisal"
				})
			},
			////风险评测-取消
			hideModal() {
				this.modalName = ""
			},
			async getCode(e) {
				// console.log(e, "这个e"); //输入内容
				this.fdd.payPassword = e
				//发送支付密码请求
				const data = await this.isVerifyPayPassword({
					id: parseInt(uni.getStorageSync('userid')),
					payPassword: e
				})


				if (data.data === "true") {
					const resz = await this.buyProduct(this.fdd)
					if(resz.code=="200"){
						this.getM()
						uni.navigateTo({
							url: "/pagesB/loansClosing/loansClosing?money=" + this.val + "&name=" + this.fdd.name
						})
					}else if(resz.code=="500"){
						uni.showToast({
							title:'余额不足',
							duration: 2000,
							icon: "none"
						})
					}
					
				} else {
					uni.showToast({
						title: "密码错误",
						duration: 3000,
						icon: "none"
					})
				}
				//if（通过）{
				//buyProduct
				// uni.navigateTo({
				// 	url: "/pagesB/loansClosing/loansClosing"
				// })
				// }else{
				//提示密码错误
				// }
			},
			yzbtn() {
				this.$refs.verify.show();
				// buyProduct(this.qingqiu)
			},

			// 风险评测打开
			show() {
				this.$refs.unikModal.show()
			},
			confirmModal() {
				// console.log("您点击了提交");
				uni.navigateTo({
					url: '/pagesB/ris-appraisal/ris-appraisal'
				})
			},
			cancelModal() {
				// console.log("您点击了关闭");
			},

			// async confirm() {
			// 	if (this.val >= 100) {
			// 		this.yzbtn()
			// 		await this.getPayToken();
			// 		uni.getStorage({
			// 			key: 'payToken',
			// 			success: res => {

			// 				this.fdd.payToken = res.data
			// 			}
			// 		})
			// 		console.log(this.fdd, "获取paytoken合并到fdd")
			// 	};
			// 	uni.navigateTo({
			// 		url: "@/pagesB/loansClosing/loansClosing"
			// 	})
			// },
			//确定按钮
			async confirm() {
					if (this.val >= this.startmoney) {
						this.fdd.payMoney = this.val - 0; //金额
						if (this.userInfo.riskId) {
							this.yzbtn();
							await this.getPayToken();
							uni.getStorage({
								key: "payToken",
								success: (res) => {
									this.fdd.payToken = res.data;
									// console.log("保存支付token")
								},
							});
							// uni.navigateTo({
							// 	url: "@/pagesB/loansClosing/loansClosing"
						} else {
							//打开风险评测确认框
							this.modalName = "DialogModal1";
						}
					} else {
						uni.showToast({
							title: "你太穷了，没满足最低购买金额",
							icon: "none",
							duration: 3000
						})
					}
				
			},
			priceTap() {
				this.val = this.val
					.replace(/[^\d\.]|^\./g, "")
					.replace(/\.{2}/g, ".")
					.replace(/^([1-9]\d*|0)(\.\d{1,2})(\.|\d{1})?$/, "$1$2")
					.replace(/^0\d{1}/g, "0");
			},

			choosePay() {
				uni.showActionSheet({
					itemList: [
						"我的钱包",
						"工商银行(5510)",
						"农业银行(5510)",
						"建设银行(5510)",
						"中国银行(2510)",
					],
					success: (res) => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.pay = this.payArr.filter((i, index) => index == res.tapIndex);
						// console.log(this.pay)
					},
					fail: function(res) {
						// console.log(res.errMsg);
					},
				});
			},
		},

		onLoad(id) {
			this.gettime()
			//确认登录才通过
			if (uni.getStorageSync("userid")) {
				if(this.userInfo.status){
					this.jijin = id.name;
					// console.log(id.product, id.name, id.current, id.rateOfReturn, id.name, "支付前",this.jijin,this.userInfo),
					this.fdd = {
						id: uni.getStorageSync("userid"), //购买人id
						productType: id.current, //	fund/gold/fixed/current,基金/黄金/定期/活期
						codeId: id.product, //购买的产品代码，
						payMoney: this.val - 0, //金额
						rateOfReturn: id.rateOfReturn, //利率
						// name: id.name //名字
					};
					this.$set(this.fdd, "name", id.name);
					
					this.fdd.fixedDay = id.fixedDay - 0;
					this.startmoney = id.startmoney - 0
					this.netWorth = id.netWorth;
				}else{
					this.goReal()
				}
			} else {
				this.goLogin()
			}
		},
	};
</script>
<style scoped>
	page {
		background-color: #ffffff;
	}
</style>

<style scoped lang="scss">
	.w-670 {
		width: 670rpx;
		margin: 0 auto;
	}

	.bg-f8 {
		background: #f8f7f7;
	}

	.color-47 {
		color: #474747;
	}

	.color-99 {
		color: #999999;
	}

	.color-32 {
		color: #323232;
	}

	.fs-32 {
		font-size: 32rpx;
	}

	.fs-24 {
		font-size: 24rpx;
	}

	.fs-52 {
		font-size: 52rpx;
	}

	.btn-lg {
		height: 90rpx;
		background: #1f6cc0;
	}

	.h-90 {
		height: 90rpx;
		line-height: 90rpx;
	}

	.h-120 {
		height: 120rpx;
		line-height: 120rpx;
	}

	.h-180 {
		height: 180rpx;
		line-height: 180rpx;
	}

	input {
		margin-left: 20rpx;
		font-size: 52rpx;
	}

	.payMethod {
		padding: 50rpx 0;
	}

	.border {
		border: 1rpx solid #e6e6e6ff;
	}

	.before {
		background: #beddf2;
	}

	.after {
		background: #1f6cc0;
	}

	.buy {
		height: 150rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;

		.buy-left {
			width: 5%;
			font-size: 52rpx;
			font-weight: bold;
		}

		.buy-right {
			width: 50%;

			input {}

			.pld {
				font-size: 32rpx;
				color: #9a9a9a;
			}

			.num {
				height: 138rpx;
				font-size: 52rpx;
				font-weight: bold;
				color: #323232;
			}
		}
	}
</style>
